<template>
  <div>
		<div v-if="loadmorexian" :class="loadposifalse?'loadposi':''" id="app">
			<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
				<div id='tabList0'>
					<div style="background: #fff;padding: 0.2rem 0 0.3rem 0">
						<!--搜索框-->
						<div class="search" @click="search()" >
							<img src="../../../src/assets/img/shouye/sousuo.png" alt="">
							搜索课程
						</div>
					</div>
					<div class="chenline-pay"></div>
					<!--热门-->
					<div style="background: #fff;padding-bottom: 0.2rem;padding-top: 0.3rem;padding-top: 0.2rem">
						<div class="hot">
							<span>热门专题</span>
							<img src="../../../src/assets/img/shouye/huo.png" alt="">
							<span class="span" @click="gd()">全部专题</span>
							<!--大图-->
							<div class="tan">
								<div class="tan1" v-for="(item,index) in hot" @click="hotke(item)">

									<img :src="img+item.thumb" alt="" class="pp">
									<p class="abc">{{item.name}}</p>
									<span class="abc1">￥{{item.xprice}}</span>
									<span class="b1" v-if="item.price == 0">免费</span>
									<span class="b" v-else>{{item.price}}</span>
								</div>
							</div>
						</div>
					</div>
				  <div v-if="newdong.length!='0'||newdong.length!=0" class="chenline-pay"></div>
					<!-- 动态 -->
					<div id="Marquee2" v-if="newdong.length!='0'||newdong.length!=0">
						<div class="marall">
							<div class="dongtai">
								<img src="../../../src/assets/img/dongtai.png" alt="">
								<span>最新动态:</span>
							</div>
							<div class="dongtaicon" :class="{marquee_top:animate}">
								<span v-for="item in newdong" @click="newdongclick(item.info_id)">{{item.content}}</span>
							</div>
						</div>
					</div>
					<div class="chenline-pay"></div>
				
				<!--select-->
				<!--下拉框-->
				<div id="navWarp">
				<!-- <div  id="selectclass"> -->
					<div id="navContent">
					<!-- <div :class="searchBarFixed?'fix':'rel'" id="Tab"> -->
						<!-- <div class="shoewr-chen"> -->
							
						<div style="width:6.9rem;margin:auto;display: flex;justify-content:space-between;align-items: center;height: 0.8rem;z-index: 9999999;">
							<!--第一个联动-->
							<div class="shang" @click="btn()" >
								<span :class="quanbu?'blue':'gray'">{{pracite}}</span>
								<img :src="quanbu?imgSrc1:imgSrc2" alt="">
								<!-- <img :src="quanbu?'../../../src/assets/img/search/shang.png':'../../../src/assets/img/search/bto.png'" alt=""> -->
							</div>
							<!--第二个联动-->
							<div class="shang" @click="btn1()" >
								<span :class="quanbu1?'blue':'gray'">{{pracite1}}</span>
								<img :src="quanbu1?imgSrc1:imgSrc2" alt="">
								<!-- <img :src="quanbu1?'../../../src/assets/img/search/shang.png':'../../../src/assets/img/search/bto.png'" alt=""> -->
							</div>
							<!--第三个联动-->
							<div class="shang" @click="btn2()" >
								<span :class="quanbu2?'blue':'gray'">{{pracite2}}</span>
								<img :src="quanbu2?imgSrc1:imgSrc2" alt="">
								<!-- <img :src="quanbu2?'../../../src/assets/img/search/shang.png':'../../../src/assets/img/search/bto.png'" alt=""> -->
							</div>

						</div>
						<div class="pos">
									<div style="overflow:auto;overflow-x:hidden;">
										<!--第一个-->
										<transition name="fade">
													<div v-if="quanbu" class="qubover" style="background: #fff">
														<div class="xia" v-for="(item,index) in fenlei" @click="xi(item)">
															<span :class="item.name == pracite?'spanspan1':'spanspan'">{{item.name}}</span>
															<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite">
															<p></p>
														</div>
													</div>
											<!-- </div> -->
											<!--第二个-->
												<div v-if="quanbu1" class="qubover" style="background: #fff">
													<div class="xia" v-for="(item,index) in pindao" @click="xi1(item)">
														<span :class="item.name == pracite1?'spanspan1':'spanspan'">{{item.name}}</span>
														<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite1">
														<p></p>
													</div>
												</div>
											<!-- </div> -->
											<!--第三个-->
												<div v-if="quanbu2" class="qubover" style="background: #fff">
													<div class="xia" v-for="(item,index) in arr" @click="xi2(item)">
														<span :class="item.name == pracite2?'spanspan1':'spanspan'">{{item.name}}</span>
														<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite2">
														<p></p>
													</div>
												</div>
											<!-- </div> -->
										</transition>
									</div>
							<!-- </div> -->
						</div>
					</div>
					<!--内容-->
					<div class="pad">
							<!-- <div> -->
								<div class="n page-infinite-listitem" v-for="(item,index) in tab0.list" @click="gkx(item)">
									<img :src="img+item.thumb" alt="" class="img1">
									<div class="right">
										<p>{{item.name}}</p>
										<p>
											<img src="../../../src/assets/img/num.png" alt="">
											<span>{{item.sales}}人已加入</span>
											<span class="wu" v-if="item.price == 0||item.price == '0'||item.price == '0.00'||item.price == 0">免费</span>
											<span class="you" v-else>￥{{item.price}}</span>
										</p>
									</div>
								</div>
								
							</div>
						

					<!-- </div> -->
				</div>
				</div>
			</mescroll-vue>
    </div>
		<div class="loadmore" v-else>
			<img src="../../../src/assets/img/load.gif" alt="">
		</div>
  </div>
</template>

<script>
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
    name: "xiaoqi",
		components: {
		  MescrollVue
		},
    data(){
      return{
				imgSrc: require("../../assets/img/kongbai.png"), 
				imgSrctop: require("../../assets/img/backtop.png"), 
				imgSrc1: require("../../assets/img/search/shang.png"), 
				imgSrc2: require("../../assets/img/search/bto.png"), 
				tabType: 0 ,// 菜单类型
				tab0: {mescroll: null, list: [], isListInit: false}, // 全部
				chenmoreloading:false,
				allLoaded:false,
				page:1,
				chenload:false,
				loadzheng:false,
				noloadzheng:false,
        lunbo:['../../../src/assets/img/timg.jpg','../../../src/assets/img/banji.png'],
        img:this.$store.state.img,
        arr: [
          {name:'综合',id:'sort'},
          {name:'最新',id:'new'},
          {name:'免费',id:'free'},
          {name:'最热',id:'hot'}
        ],
        b:false,
        quanbu:false,
        quanbu1:false,
        quanbu2:false,
        input:'',
        pracite:'全部课程',
        pracite1:'全部频道',
        pracite2:'综合',
        cid:'',
        pid:'',
        field:'',
        fenlei:[],
        pindao:[],
        bottom:[],
        hot:'',
        searchBarFixed:false,
				loadmorexian:false,
				newdong:'',
				// page:1,
				loadfalse:true,
				count:'',  //一共多少数据
				timer:null,
				selecttop:false,
				loadposifalse:false,
				top:'',
				animate:false,
				noDate:false,  //这是一个判断是否加载的开关
      }
    },
    methods:{
			// 点击最新动态
			newdongclick(id){
				this.$router.push({
				  path:'/News',
				  query:{
				    nid:id
				  }
				})
			},
      gkx(item){
				var type = item.type;
				this.$router.push({
					path:'/course',
					query:{
					 cid:item.id
					}
				})
        
      },
      search(){
        this.$router.push({
          path:'/search',
					query:{
						type:2
					}
        })
      },
      gd(){
        this.$router.push({
          path:'/zhuanti'
        })
      },
      hotke(item){
        this.$router.push({
          path:'/specialtopic',
          query:{
            stid:item.id
          }
        })
      },

        getTabData (tabType) {
				  if (tabType == null) tabType = this.tabType;
				  if (tabType === 0) {
				    return this.tab0;
				  }
				},
				changeTab () {
					this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
					this.getTabData(0).mescroll.resetUpScroll() // 刷新列表数据
				},
				mescrollInit0 (mescroll) {
				  mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
				  this.tab0.mescroll = mescroll;
				},
				
				getMescrollUp (tabType) {
				  return {
				    auto: true,
				    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
				    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
						toTop: {
							//回到顶部按钮
							src: this.imgSrctop, //图片路径,默认null,支持网络图
							offset: 500 //列表滚动1000px才显示回到顶部按钮
						},
						 empty: {
							 warpId: 'tabList0', // 父布局的id;
							 icon: this.imgSrc, // 图标,默认null
							 tip: '暂时没有找到您所需要的内容…', // 提示
							 
						 },
				  }
				},
				upCallback (page, mescroll) {
					var that = this;
				  if (mescroll.tabType === 0) {
				    // 全部
				    // that.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
						that.axios.get(that.$store.state.url +'live/courseList',{
							 params:{
								cid:that.cid,
								pid:that.pid,
								field:that.field,
								page: page.num,
								limit:page.size,
								new:1
							 }
						 }).then(res=>{
											// console.log(res.data.data.class)
							that.loadmore = true;
							if(res.data.errcode==0||res.data.errcode=='0'){
									var curPageData = res.data.data.lists;
									mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
									 if (page.num === 1) that.tab0.list = []; // 如果是第一页需手动制空列表
									 that.tab0.list = that.tab0.list.concat(curPageData); // 追加新数据
									 // window.addEventListener('scroll', that.handleScroll);
									var navWarp=document.getElementById("navWarp");
									if(mescroll.os.ios){
										// console.log(8989)
										var navContent=document.getElementById("navContent");
										// navWarp.style.height=navWarp.offsetHeight+"px";//固定高度占位,避免悬浮时列表抖动
// 										//ios的悬停效果,通过给navWarp添加nav-sticky样式来实现
										navContent.classList.add("nav-sticky");
									}else{
										//android和pc端悬停效果,通过监听mescroll的scroll事件,控制navContent是否为fixed定位来实现
										// navWarp.style.height=navWarp.offsetHeight+"px";//固定高度占位,避免悬浮时列表抖动
										var navContent=document.getElementById("navContent");
										mescroll.optUp.onScroll=function(mescroll, y, isUp){
											// var scroll_offset = $('#navContent').offsetTop; 
											// console.log("up --> onScroll 列表当前滚动的距离 y = " + y + ", 是否向上滑动 isUp = " + isUp);
											if(y>=navWarp.offsetTop){
												// $("#navContent").addClass("nav-fixed");
												navContent.classList.add("nav-fixed");
											}else{
												// $("#navContent").removeClass("nav-fixed");
												navContent.classList.remove("nav-fixed");
											}
										}
									}
							}
						
						})
				  }
				},

      btn(){
				// console.log(888)
        this.quanbu = !this.quanbu;
        this.quanbu1 = false;
        this.quanbu2 = false;
				// this.offetop(this.quanbu);
				
      },
      btn1(){
        this.quanbu1 = !this.quanbu1;
        this.quanbu = false;
        this.quanbu2 = false;
				// this.offetop(this.quanbu1);
      },
      btn2(){
        this.quanbu2 = !this.quanbu2;
        this.quanbu = false;
        this.quanbu1 = false;
				// this.offetop(this.quanbu2);
      },
		offetop(quanbu){
			var scroll_offset = $('#selectclass').offset(); //得到selector的offset，包含两个值，top和left
			// console.log(scroll_offset);
			if(quanbu){
				this.stop();
				if((scroll_offset.top!=0||scroll_offset.top!='0')){
		      $("body,html").animate({
		          scrollTop:scroll_offset.top //让body的scrollTop等于selector的top，就实现了滚动
		       });
		     var box=document.getElementById('Tab'); // 获取元素
				 var top1 = box.getBoundingClientRect().top; // 元素上边距离页面上边的距离
					 // console.log(top1);
				}
			}else{
				this.move();
				// this.top = 0.8
			}
			var box=document.getElementById('Tab'); // 获取元素
			var top1 = box.getBoundingClientRect().top; // 元素上边距离页面上边的距离
			if(top1>100){
				this.top = top1+50;
			}else{
				this.top = 50;
			}
			
			
		},
			 /***滑动限制***/
      stop(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
      },
      /***取消滑动限制***/
      move(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
      },
      xi(item){
				var that = this;
				that.allLoaded=false;
        that.pracite = item.name;
        that.cid = item.id;
				// this.move();
				// that.page=1;
        that.changeTab();
        that.quanbu = !that.quanbu;
      },
      xi1(item){
				var that = this;
				that.allLoaded=false;
        that.pracite1 = item.name;
        that.pid = item.id;
				// that.page=1;
        that.changeTab();
				// this.move();
        that.quanbu1 = !that.quanbu1;
      },
      xi2(item){
				var that = this;
				that.allLoaded=false;
        that.pracite2 = item.name;
        that.field = item.id;
				// that.page=1;
        that.changeTab();
				// this.move();
        that.quanbu2 = !that.quanbu2;
      },
		showMarquee: function() {
			this.animate = true;
		
			setTimeout(() => {
				this.newdong.push(this.newdong[0]);
		
				this.newdong.shift();
		
				this.animate = false;
			}, 500);
		},
		
 
    },
		beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
		  next(vm => {
		    let curMescroll = vm.$refs['mescroll' + vm.tabType]; // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
		    curMescroll && curMescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
		  })
		},
		beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
		  let curMescroll = this.$refs['mescroll' + this.tabType]; // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
		  curMescroll && curMescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
		  next()
		},
		
	destroyed(){
		clearInterval(this.timer);
		this.move();
		window.removeEventListener('scroll', this.handleScroll);
		window.removeEventListener('scroll', this.onScroll);
	},

		 
		
    mounted(){
			this.sdk.getJSSDK('','',this.$store.state.url);	
			var that = this;
			
      // 热门专题
      that.axios.get(that.$store.state.url +'live/hotSpecial').then(res=>{
        // console.log(res.data)
				that.loadmorexian=true;
        if (res.data.errcode == 0||res.data.errcode == '0'){
					var data = res.data.data;
					if(data.length>4){
						that.hot = data.slice(0,4);
					}else{
						that.hot = data;
					}
        }
      })


      //课程分类 一级
      that.axios.get(that.$store.state.url +'live/getCourseClass').then(res=>{
        if (res.data.errcode == 0||res.data.errcode == '0'){
          that.fenlei = res.data.data;
          var obj = {
            name:'全部课程',
            id:''
          }
          that.fenlei.unshift(obj)
					// console.log(this.fenlei);
        }
      })

      //课程频道  二级
      that.axios.get(that.$store.state.url +'live/getChannel').then(res=>{
        if (res.data.errcode == 0){
          that.pindao = res.data.data;
          var obj = {
            name:'全部频道',
            id:''
          }
          that.pindao.unshift(obj)
        }
      })

			// 最新动态：
			that.axios.get(that.$store.state.url +'course/notice',{
				params:{
					type:2
				}
			}).then(res=>{
			  if (res.data.errcode == 0||res.data.errcode == '0'){
			    that.newdong = res.data.data;
					// console.log(this.newdong.length)
					if(that.newdong.length>1){
						setInterval(this.showMarquee, 2000);
					}
					
			  }
			})
			

    },
  }
</script>

<style scoped>
	#tabList0{
		background: #fff;
		padding-bottom: 1rem;
	}
	/*ios使用sticky样式实现*/
	.nav-sticky{
		z-index: 9999;/*需设置zIndex,避免在悬停时,可能会被列表数据遮住*/
		position: -webkit-sticky;
		position: sticky;
	  top: 0;/*相对mescroll的div悬停的位置*/
		z-index: 9999999;
		background: #fff;
	}
	/*android和pc端悬停*/
	.nav-fixed{
		position: fixed;
		top: 0;
		background: #fff;
		width: 7.5rem;
		z-index: 9999999;
	}
	#navContent{
		background: #fff !important;
	}
	.mescroll {
	  position: fixed;	
	  top: 0rem;
	  bottom: 0rem;
	  height: auto;
	}
	.page-infinite-loading{
		margin: auto;
	}
	.marquee_top {
		transition: all 0.5s;
	
		margin-top: -0.7rem;
	}
	.qubover{
		max-height: 5rem;
		overflow-y: scroll;
		background: #FFFFFF;
		position: relative;
		z-index: 99999;
	}
	.loadposi{
		position: fixed;
		heigth: 100%;
		top: 0;
	}
	.selecttop1{
		position: relative;
		top: 0;
	}
	#selectclass{
		position: relative;
	}
	
	._v-container[data-v-ecaca2b0]{
		position: relative !important;
	}
  .rel{
    position: relative;
    background: #fff;
    margin-top: 0.3rem;
		z-index: 999;
  }
  .fix{
    position: fixed;
    top: 0;
    background: #fff;
    width: 7.5rem;
	z-index: 9999999;
  }
  .pad{
    /* padding-bottom: 1rem; */
    /* padding-bottom: 0.4rem; */
    background: #fff;
    overflow: hidden;
		height: auto;
  }
  .mar{
    margin-top: 1rem;
    padding-bottom: 1rem;
    background: #fff;
    overflow: hidden;
  }
  .topImg{
    width: 100%;
    height:3.3rem;
    border-radius:0.1rem;
  }
  .search{
    width: 92%;
    margin: auto;
    height: 0.56rem;
    background:rgba(240,240,240,1);
    border:0.01rem solid rgba(237,237,237,1);
    border-radius:0.28rem;
    font-size:0.24rem;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search img{
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.05rem;
  }
  .img{
    width: 100%;
    height: 3.3rem;
    margin-top: 0.16rem;
    border-radius: 0.1rem;
  }
	#Marquee2{
		width: 7.5rem;
		height:1.1rem;
		overflow: hidden;
		margin: 0 auto 0;
		background: #fff;
	}
	.marall{
		width: 6.9rem;
		margin:.2rem auto;
		height:0.7rem;
		background: #F7F7F7;
		display: flex;
		justify-content: flex-start;
		overflow: hidden;
	}
	.dongtai{
	  width: 100%;
	  text-align: left;
	  background: #F7F7F7;
	  /* line-height: .7rem; */
	  /* margin-top: 0.2rem; */
	  border-radius:0.08rem;
	  box-sizing: border-box;
	  padding: 0 0rem 0rem 0.16rem;
	  /* padding: 0 0.16rem 0rem 0.16rem; */
	  /* padding: 0.15rem 0.16rem 0.19rem 0.16rem; */
	}
  .dongtai img{
    width: 0.32rem;
    height: 0.32rem;
    vertical-align: middle;
  }
  .dongtai span:nth-child(2){
    vertical-align: middle;
    font-size: 0.28rem;
    color: #333333;
		line-height: .7rem;
		display: inline-block; 
  }
	.dongtaicon{
		/* overflow: hidden; */
		height: .7rem;
	}
  .dongtaicon span{
    width: 4.5rem;
  	line-height:.7rem;
    font-size: 0.26rem;
    color: #666666;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
		padding-right: .2rem;
  }
  #demo{
		padding-bottom: 1rem;
	}
  .n{
    width: 92%;
    height: 1.18rem;
    margin: auto;
    margin-top: 0.2rem;
  }
  .img1{
    width: 2.1rem;
    height: 100%;
    float: left;
    border-radius: 0.08rem;
  }
  .right{
    width: calc(92% - 1.8rem);
    height: 100%;
    margin-left: 2.3rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .right p{
    width: 100%;
  }
  .right p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.4rem;
		display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
  }
  .right p:nth-child(2) img{
    width: 0.32rem;
  }
  .right p:nth-child(2) span:nth-child(2){
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
  }
  .you{
    float: right;
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
  }
  .wu{
    float: right;
    font-size:0.3rem;
    font-weight:bold;
    color:#0287FF;
    line-height:0.32rem;
  }
  .shang{
    width: 33%;
    height: 0.5rem;
   display: flex;
    align-items: center;
  }
  .shang:nth-child(2){
    justify-content: center;
  }
  .shang:nth-child(3){
    display: flex;
    justify-content: flex-end;
  }
  .blue{
    font-size:0.26rem;
    color:rgba(2,135,255,1);
  }
  .gray{
    font-size:0.26rem;
    color:rgba(51,51,51,1);
  }
  .shang img{
    width: 0.15rem;
    height: 0.13rem;
    margin-left: 0.14rem;
  }
  .xia{
    width: 92%;
    margin: auto;

    /*margin-top: 0.2rem;*/
    padding-top: 0.2rem;
  }
  .spanspan{
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    vertical-align: middle;
  }
  .spanspan1{
    font-size:0.28rem;
    color:rgba(2,135,255,1);
    vertical-align: middle;
  }
  /*.xia:hover .spanspan{*/
  /*color:rgba(2,135,255,1);*/
  /*}*/
  .xia img{
    width: 0.32rem;
    vertical-align: middle;
    float: right;
  }
  .xia p{
    width: 100%;
    height: 0.02rem;
    background:rgba(237,237,237,1);
    margin-top: 0.2rem;
  }
  .pos{
    width:7.5rem;
    position: absolute;
    /* top: 1.2rem; */
    left: 0;
		z-index: 9999999;
		background: #fff;
		/* background: rgba(0,0,0,.3); */
  }
	.pos::-webkit-scrollbar{
	  display:block;
	}
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.25s ease-out;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .hot{
    width: 92%;
    margin: auto;

  }
  .hot span:nth-child(1){
    font-size:0.34rem;
    font-weight:800;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .hot img:nth-child(2){
    width: 0.3rem;
    height: 0.3rem;
  }
  .span{
    font-size:0.24rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    float: right;
  }
  .tan{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .tan1{
    width: 48%;
    margin-top: 0.3rem;
    position: relative;
  }
  .pp{
    width: 100%;
    height: 1.9rem;
    border-radius: 0.1rem;
  }

  .abc{
    width: 100%;
    /* height: 0.6rem; */
    margin-top: 0.19rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    overflow : hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .abc1{
    font-size:0.24rem;
    text-decoration:line-through;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    display: inline-block;
    margin-top: 0.34rem;
  }
  .b{
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    float: right;
    display: inline-block;
    margin-top: 0.3rem;
  }
  .b1{
    font-size:0.3rem;
    font-weight:bold;
    color:#0287FF;
    line-height:0.32rem;
    float: right;
    display: inline-block;
    margin-top: 0.3rem;
  }
</style>
